<template>
  <div class="websocket-test-event">
    <h1>{{ message }}</h1>
    <p>nginx 一个高性能的反向代理服务器，从1.3版本开始支持 WebSocket 的反向代理</p>
    <h2>一、node 服务器配置</h2>
    <p>安装 http 模块 和 websocket 模块（我用的是我是ws）</p>
    <code>
        <pre>
            // wesocket 服务
            var WebSocketServer = require('ws').Server,
            wss = new WebSocketServer({ port: 8181 });//服务端口8181
            wss.on('connection', function (ws, req) {
                console.error('连接成功了哦！');
                ws.on('message', function (message) {
                    console.log('我是服务器，接到了前端信息：', message);
                    ws.send(JSON.stringify({
                        receive: message,
                        response: `这个我回的消息：现在的时间是${new Date()}`
                    }));
                });

                setInterval(() => {
                    ws.send(JSON.stringify({
                        response: `这是我主动推给的消息${new Date()}`
                    }));
                }, 2000);
            });
        </pre>
    </code>
    <h2>二、nginx 端配置</h2>
    <p>直接上代码哈</p>
    <code>
        <pre>
            map $http_upgrade $connection_upgrade {
                default upgrade;
                '' close;
            }
            server {
                listen       8000;
                server_name  localhost;

                # websocket
                location /websocket {
                    proxy_pass http://localhost:8181/;
                    proxy_http_version 1.1;
                    proxy_read_timeout 3600s; # 默认 60s
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection $connection_upgrade;
                }
            }
        </pre>
    </code>
    <ol>
        <li>
            第一行是配置map 映射表，根据客户端请求中 $http_upgrade 的值来构造改变 $connection_upgrade 的值，即根据变量 $http_upgrade 的值和{} 里规则创建新的变量 $connection_upgrade并赋值
        </li>
        <li>
            注释# websocket以下是设置代理地址，用http1.1，并且设置断开时间，然后将连接从HTTP连接升级到WebSocket连接，Upgrade机制使用了Upgrade协议头和Connection协议头;
            为了让Nginx可以将来自客户端的Upgrade请求发送到后端服务器，Upgrade和Connection的头信息必须被显式的设置
        </li>
    </ol>
    <p>配置完后 可以用 sudo nginx -t 测试nginx.config是否用问题</p>
    <h2>三、简单测试我们的配置代码</h2>
    <section>
        <div>
            <img class="img-shadow" src="../../images/somethingInterssting/nginx/client.jpg"/>
        </div>
        <div>
            <img class="img-shadow" src="../../images/somethingInterssting/nginx/server.jpg"/>
        </div>
    </section>
    <p>
        左边是客户端websocket 实例，右边是服务端连接成功时的信息。
    </p>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class websocket extends Vue {
        // data 在这
        message: string = 'nginx 反向代理 websocket'

        created() {
             //WebSocket实例化
            let ws = new WebSocket("ws://localhost:8000/websocket");
            ws.onopen = (e) => {
                //成功连接服务器回调
                console.error(e);
            };
            ws.onmessage = (e) => {
                //成功连接服务器回调
                console.error('我接收到了信息：', e);
            };

            // let i = 0;
            // setInterval(() => {
            //     ws.send('' + i);

            //     i+=1;
            // }, 1000)
        }
    }
</script>
<style lang="scss">
.websocket-test-event{
    width: 100%;
    section{
        display: flex;
        >div{
            width: 450px;
            flex-grow: 1;
        }
    }
}
</style>